<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('filed.collectList')}}</block>
		</cu-custom>
		<view class="flex" :style="{height:saleHeight+'px'}" style="background: #f1f1f1;">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view radius-xs">
				<view v-for="(item,index) in leftList" :key="index" class="flex justify-between align-center"
					:style="{borderRadius:leftIndex==index?'15rpx 0 0 15rpx':''}"
					:class="[leftIndex==index ? 'u-tab-item-active leftSoild' : 'u-tab-item']" :data-current="index"
					@tap.stop="swichMenu(index)">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y scroll-with-animation class="bg-white flex flex-direction" style="height: 100%;"
				:style="{width: 'calc(100vw - 150rpx)'}">
				<view class="grid gap padding-sm">
					<view class="bg-white radius-xs padding-sm flex align-center"
						style="box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.15);" v-for="(item,index) in dataList"
						:key="index">
						<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
							class="radius-xs flex-shrink" />
						<view class="grid flex-sub margin-left-sm" style="gap: 8rpx;">
							<text class="font-bold text-black text-df one-line">{{item.name}}</text>
							<text class="text-xs text-gray font-400 one-line">{{item.introduce}}</text>
							<text class="text-xl text-red font-bold">${{item.price}}</text>
							<view class="flex justify-between align-center">
								<view class="flex align-center text-gray text-xs font-400">
									<text>{{$t('home.mothSallNum')}}:{{item.total_sall_num}}</text>
									<text class="margin-left">{{$t('group.comment')}}:{{item.comment_num}}</text>
								</view>
								<image src="@/static/img/collectActive.png" style="width: 35rpx;height: 33rpx;"
									@tap.stop="handleLike(item.goods_id,index)" />
							</view>
						</view>
					</view>
					<section class="empty" v-if="!dataList.length">
						<u-empty mode="list" 
							:text="$t('list.empty')" />
					</section>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		goods_cate,
		collectList,
		goods_collect_del,
	} from '@/apis'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				saleHeight: 0,
				leftList: [],
				leftIndex: 0,
				dataList: [],
				page: 1,
			}
		},
		mounted() {
			this.computedHeight()
		},
		onShow() {
			this.page = 1
			this.leftIndex = 0
			this.leftList = []
			this.goods_cate()
		},
		onReachBottom() {
			this.page++
			this.collectList()
		},
		methods: {
			async goods_cate() {
				const res = await goods_cate()
				this.leftList = this.leftList.concat(...res)
				this.collectList(this.leftList[this.leftIndex].id)
			},
			async collectList(cate_id) {
				const res = await collectList({
					cate_id
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			async computedHeight() {
				this.saleHeight = await this.helper.computedHeight(this, '#id', this.CustomBar)
			},
			async swichMenu(index) {
				if (index == this.leftIndex) return;
				this.leftIndex = index;
				this.page = 1
				this.dataList = []
				this.collectList(this.leftList[this.leftIndex].id)
			},
			async handleLike(id, index) {
				await goods_collect_del({
					goods_id: id
				})
				this.helper.showToast(this.$t('message.success'))
				this.dataList.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-tab-view {
		width: 150rpx;
		height: 100%;

		.u-tab-item {
			height: 80rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			padding-left: 30rpx;
		}

		.u-tab-item-active {
			height: 80rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 24rpx;
			color: #06C168;
			padding-left: 30rpx;
			background: #fff;
		}
	}
</style>